import type { ProColumns } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-components';
import { Button } from 'antd';
import { createForm } from '@formily/core';
import {useDrawerForm} from '@/uses/useForm';
import {useCommonProTable} from '@/uses/useProTable';
import { createRequest } from '@/uses/useCurdPage';

const form = createForm()
const passwdForm = createForm()

type DetailInfo = {
  id: string;
  nickname: string;
  name: string;
  isEnable: boolean;
  createdBy: string;
  createdAt: string;
};

const emptyDetailInfo: DetailInfo = {
  id: '',
  nickname: '',
  name: '',
  isEnable: false,
  createdBy: '',
  createdAt: '',
}

const emptyPasswdDetailInfo = {
}

const schema = {
  type: 'object',
  properties: {
    name: {
      title: '用户名',
      required: true,
      type: 'string',
      maxLength: 15,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    nickname: {
      title: '昵称',
      required: true,
      type: 'string',
      maxLength: 5,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    password: {
      type: 'string',
      title: '密码',
      'x-decorator': 'FormItem',
      'x-component': 'Password',
      'x-component-props': {
        checkStrength: true,
      },
      'x-reactions': [
        {
          dependencies: ['.passwordConfirm'],
          fulfill: {
            state: {
              selfErrors:
                '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
            },
          },
        },
      ]
    },
    passwordConfirm: {
      type: 'string',
      title: '确认密码',
      'x-decorator': 'FormItem',
      'x-component': 'Password',
      'x-component-props': {
        checkStrength: true,
      },
      'x-reactions': [
        {
          dependencies: ['.password'],
          fulfill: {
            state: {
              selfErrors:
                '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
            },
          },
        },
      ]
    },
    isEnable: {
      type: 'boolean',
      title: '状态',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Radio.Group',
      enum: [
        {
          label: '启用',
          value: true,
        },
        {
          label: '禁用',
          value: false,
        },
      ],
    },
  },
}

const schemaPasswd = {
  type: 'object',
  properties: {
    password: {
      type: 'string',
      title: '密码',
      'x-decorator': 'FormItem',
      'x-component': 'Password',
      'x-component-props': {
        checkStrength: true,
      },
      'x-reactions': [
        {
          dependencies: ['.passwordConfirm'],
          fulfill: {
            state: {
              selfErrors:
                '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
            },
          },
        },
      ]
    },
    passwordConfirm: {
      type: 'string',
      title: '确认密码',
      'x-decorator': 'FormItem',
      'x-component': 'Password',
      'x-component-props': {
        checkStrength: true,
      },
      'x-reactions': [
        {
          dependencies: ['.password'],
          fulfill: {
            state: {
              selfErrors:
                '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
            },
          },
        },
      ]
    },
  },
}

const changePasswdRequest = console.log


const customCols: ProColumns<DetailInfo>[] = [
  {
    title: '昵称',
    dataIndex: 'nickname',
    copyable: true,
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项为必填项',
        },
      ],
    },
  },
  {
    title: '用户名',
    dataIndex: 'name',
    copyable: true,
    ellipsis: true,
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项为必填项',
        },
      ],
    },
  },
]

const tableTitle = '用户管理';

export default () => {
  const {deleteRequest, detailRequest, listRequest, saveRequest} = createRequest({resourceName: 'users'});

  const {showForm} = useDrawerForm({form, schema, saveRequest, detailRequest, emptyDetailInfo});
  const {showForm: showPasswd} = useDrawerForm({
    form: passwdForm,
    schema: schemaPasswd,
    saveRequest: changePasswdRequest,
    detailRequest: (id:string) => {return {id}},
    emptyDetailInfo: emptyPasswdDetailInfo
  });

  const {TableElement} = useCommonProTable({
    tableTitle, customCols, showForm,
    deleteRequest,
    listRequest,
    operationRender: (record: DetailInfo) => [<Button size='small' key='editPasswd' onClick={() => showPasswd(record.id, () => {})}>改密</Button>],
  });

  return (
    <PageContainer
      header={{title: tableTitle}}
    >
      <TableElement/>
    </PageContainer>
  );
};